import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import BizParams from '../../components/commons/BizParams'
import CurrencySelect from '../../components/commons/CurrencySelect'
import SingleDragger from '../../components/commons/SingleDragger'
import OperatorConstant from "../../utils/OperatorConstant";
import Constants from "../../utils/Constants";
const R = require('ramda');
import moment from 'moment'
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const view= "view"

export default Form.create({wrappedComponentRef: true})(class Exchange extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            loading: false
        }
    }

    handleCancel = () => {
        this.props.form.resetFields()
        this.setState({loading: false})
    }

    getAttach = () => {
        return this.refs.exchangeurl.getUrl();
    }

    handleConfirm = (re) => {
        this.props.form.validateFields((errors, values) => {

            if(!this.props.disable){
                let exchangeurl= this.refs.exchangeurl.getUrl();
                if(R.isNil(exchangeurl)||R.isEmpty(exchangeurl)){
                    message.error("请先上传结汇水单");
                    return;
                }
            }

            if (errors) return;

            values.exchangetime = values.exchangetime ? values.exchangetime.format(dateFormat) : '';
            values.exchangeurl = this.refs.exchangeurl.getUrl();

            if(re && re.resetLoading)re.resetLoading(true);
            this.props.dispatch({
                type: "foreignExchangeManage/exchange",
                payload: {
                    id: this.props.dataSource.id,
                    ...values,
                    onSuccess:()=>{
                        if(re && re.resetLoading)re.resetLoading(false);
                        this.props.handleCancel();
                        this.props.handleSearch();
                    },
                    onFail: () => {if(re && re.resetLoading)re.resetLoading(false)}
                }
            });

        })
    }

    setAmount = (type) => {
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;

        if(type == "bankexchangerate"){
            let bankexchangerate = this.props.form.getFieldValue("bankexchangerate");
            if(!R.isNil(bankexchangerate)){
                let recamount = dataSource.recamount;
                if(!R.isNil(recamount))
                    this.props.form.setFieldsValue({bankexchangeamount: recamount * bankexchangerate});
            }


        }

        if(type == "cstexchangerate"){
            let cstexchangerate = this.props.form.getFieldValue("cstexchangerate");
            if(!R.isNil(cstexchangerate)){
                let recamount = dataSource.recamount;
                if(!R.isNil(recamount))
                    this.props.form.setFieldsValue({cstexchangeamount: recamount * cstexchangerate});
            }

        }



    }


    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let disabled = (this.props.type == OperatorConstant.view? true : false);
        let exchangeurl =R.isNil(dataSource.exchangeurl) ? "" :dataSource.exchangeurl;

        return (

            <Form>
                <Tabs tabPosition={'top'}>
                    <TabPane tab="结汇信息" key="1">
                        <Form>
                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="银行结汇汇率"
                                        hasFeedback
                                    >

                                        <div>
                                            {getFieldDecorator('bankexchangerate', {
                                                rules: [{
                                                    required: true, message: '请输入银行结汇汇率',
                                                }],
                                                initialValue: dataSource.bankexchangerate

                                            })(
                                                <InputNumber style={{width: '100%'}} min={0.00001} max={10000}
                                                             onBlur={this.setAmount.bind(this, "bankexchangerate") }
                                                             disabled={disabled}/>
                                            )}
                                        </div>
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="银行结汇金额"
                                        hasFeedback
                                    >

                                        <div>
                                            {getFieldDecorator('bankexchangeamount', {
                                                rules: [{
                                                    required: true, message: '请输入银行结汇金额',
                                                }],
                                                initialValue: dataSource.bankexchangeamount
                                            })(
                                                <InputNumber style={{width: '100%'}} disabled={true} maxLength="18"/>
                                            )}
                                        </div>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="结汇日期"
                                        hasFeedback
                                    >

                                        <div>
                                            {getFieldDecorator('exchangetime', {
                                                rules: [{
                                                    required: true, message: '请选择结汇日期',
                                                }],
                                                initialValue: (dataSource.exchangetime == '' || dataSource.exchangetime == null) ? '' : moment(dataSource.exchangetime, dateFormat)
                                            })(
                                                <DatePicker
                                                    style={{width: '100%'}}
                                                    showTime={{format: 'YYYY-MM-DD'}}
                                                    format="YYYY-MM-DD"
                                                    placeholder="请选择时间"
                                                    disabled={disabled}/>
                                            )}
                                        </div>

                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label={<span className="ant-form-item-required">结汇水单</span>} hasFeedback>
                                        <SingleDragger url={exchangeurl} dataSource={dataSource} ref="exchangeurl" module={Constants.FILE_MODULE[2]} disabled={this.props.disable}/>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </TabPane>
                </Tabs>
            </Form>

        );
    }
})


